<template>
  <el-menu
    :default-active="activeIndex"
    class="h-full border-r-0"
    :class="isCollapse ? 'w-60px' : 'w-180px min-h-400px'"
    :collapse="isCollapse"  >
    <h3 class="text-center text-14px py-10px  font-bold" :key="TitleText">{{ TitleText }}</h3>
    <!-- 渲染没有子菜单的项 -->
    <el-menu-item
      v-for="item in noChilden"
      :key="item.index"
      :index="item.index"
      @click="handlemenu(item)"
    >
      <component v-if="item.icon" 
      class="mr-8px text-18px w-18px h-18px text-[#606266] hover:text-[#409eff]" 
      :class="[
    /* 默认正常粗细 */
    'font-normal',
    /* 当 EP 给父节点挂上 is-active 时，图标也跟着加粗 */
    '[.is-active_&]:font-bold'
  ]"
      :is="item.icon.name"></component>
      <span>{{ item.label }}</span>
    </el-menu-item>
 
    <!-- 渲染有子菜单的项 -->
    <el-sub-menu
      v-for="item in hasChilden"
      :key="item.index"
      :index="item.index"
    >
      <template #title>
        <component v-if="item.icon" 
        class="mr-8px text-18px w-18px h-18px text-[#606266] hover:text-[#409eff]"
        :class="[
    /* 默认正常粗细 */
    'font-normal',
    /* 当 EP 给父节点挂上 is-active 时，图标也跟着加粗 */
    '[.is-active_&]:font-bold'
  ]"
        :is="item.icon.name"></component>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item
        v-for="subItem in item.children"
        :key="subItem.index"
        :index="subItem.index"
        @click="handlemenuchild(item, subItem)"
      >
        <span>{{ subItem.label }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
 
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAllDataStore } from '@/stores';
 
const store = useAllDataStore();
 
interface MenuItem {
  index: string;
  label: string;
  icon?: { name: string; __name: string };
  children?: MenuItem[];
}
 
// 确保 menuAPI 是一个数组，并赋值给 menuData
const menuData = ref<MenuItem[]>([]); // 初始化为空数组
 
// 封装数据获取和处理逻辑
const fetchMenuData = () => {
  try {
    const result = store.getMenuData(); // 调用 store 获取数据
    //console.log('main menuAPI 返回的数据:', store.getMenuData());
    //console.error('main menuAPI :', result);
 
    if (Array.isArray(result)) {
      menuData.value = result as MenuItem[];
    } else {
      console.error('menuAPI 返回的数据不是数组:', result);
    }
  } catch (error) {
    console.error('获取菜单数据失败:', error);
  }
};
 
onMounted(() => {
  if (!store.getMenuData().length) {
    console.warn('菜单数据为空，尝试重新获取');
    fetchMenuData();
  } else {
    console.log('菜单数据已存在，无需重新获取');
    menuData.value = store.getMenuData() as MenuItem[];
    console.log('menuData.value:', menuData.value);
  }
});
 
 
const hasChilden = computed(() => menuData.value.filter(item => item.children && item.children.length > 0));
const noChilden = computed(() => menuData.value.filter(item => !item.children || item.children.length === 0));
 
const activeIndex = ref('Home');
const router = useRouter();
 
const handlemenu = (item: MenuItem) => {
  router.push(item.index);
  console.log('item:', item);
  store.setTabsData(item)

};
 
const handlemenuchild = (item: MenuItem, subItem: MenuItem) => {
  router.push(subItem.index);
  // console.log('subItem:', subItem);
  store.setTabsData(subItem)
};
 
const TitleText = computed(() => {
  return store.isCollapse ? '平台' : '测试平台管理';
});
 
const isCollapse = computed(() => store.isCollapse);
 
 
</script>
 
